import React, { Component } from 'react';
import './JoinStore.css'
import { Row, Col, Drawer, Button, Input, notification } from 'antd';
import axios from 'axios';
import cookies from 'react-cookies'

class JoinStore extends Component {
    state = {
        joinVisible: false,
        storeVisible: false,
        sName: '',
        sLocation: '',
        storeID:''
    };

    showJoinDrawer = () => {
        this.setState({
            joinVisible: true,
        });
    };

    showStoreDrawer = () => {
        this.setState({
            storeVisible: true,
        });
    };
    onClose = () => {
        this.setState({
            joinVisible: false,
            storeVisible: false
        });
    };

    AddStore = () => {
        const { sName, sLocation } = this.state
        var data = {
            "StoreName": sName,
            "StoreLocation": sLocation
        }
        axios
            .post('http://localhost:5500/ant/ant/Store/AddStore', data)
            .then(response => {
                this.setState({ storeID: response.data }, () => {
                    let storeID = this.state.storeID, uid = cookies.load('userID');
                    axios.put(`http://localhost:5500/ant/ant/User/UpdateJoinStore`, {
                        storeID: storeID * 1,
                        userID: uid * 1
                    })
                        .then(response => {
                            notification['success']({
                                message: '加入成功',
                                description: '3s秒钟后自动跳转'
                            })
                            cookies.save('userStore', storeID * 1)
                            setTimeout(() => {
                                this.jumpToCeshier()
                            }, 3000);
                            return;
                        })
                        .catch(err => {
                            notification['warning']({
                                message: '加入失败',
                                description: '可能是店铺编号错误，请检查重试'
                            })
                        })
                })
            })
    }

    jumpToCeshier = () => {
        this.props.history.replace('/cashier/create')
    }

    actionJoinStore = () => {

        let storeID = this.joinStoreIDInput.state.value, uid = cookies.load('userID');
        axios.put(`http://localhost:5500/ant/ant/User/UpdateJoinStore`, {
            storeID: storeID * 1,
            userID: uid * 1
        })
            .then(response => {
                notification['success']({
                    message: '加入成功',
                    description: '3s秒钟后自动跳转'
                })
                cookies.save('userStore', storeID * 1)
                setTimeout(() => {
                    this.jumpToCeshier()
                }, 3000);
                return;
            })
            .catch(err => {
                notification['warning']({
                    message: '加入失败',
                    description: '可能是店铺编号错误，请检查重试'
                })
            })
    }

    render() {
        return (
            <div> <br />
                <br />
                <div id="join-center-box">
                    <br />

                    <Row>
                        <Col span={3} offset={18} style={{ marginTop: '150px', textAlign: 'center' }}>
                            <div onClick={this.showStoreDrawer} style={{ backgroundColor: 'white', borderRadius: '50%' }}>
                                <i style={{ color: "#ffb400", fontSize: '80px' }} className="fas fa-store"></i>
                                <br />
                                <h5>创建店铺</h5>
                            </div>
                        </Col>
                        <Col span={3} offset={18} style={{ marginTop: '100px', textAlign: 'center' }}>
                            <div onClick={this.showJoinDrawer}>
                                <div style={{ backgroundColor: 'white', borderRadius: '50%' }}>
                                    <i style={{ color: "#00a4ef", borderRadius: '50%', fontSize: '80px', backgroundColor: 'white' }} className="fas fa-shopping-bag"></i>
                                    <br />
                                    <h5>加入店铺</h5>
                                </div>
                            </div>
                            <div className="join-create-store-btn"></div>
                        </Col>
                    </Row>

                    <Drawer
                        title="创建自己的商店"
                        width={300}
                        onClose={this.onClose}
                        visible={this.state.storeVisible}
                        bodyStyle={{ paddingBottom: 80 }}
                        footer={
                            <div
                                style={{
                                    textAlign: 'right',
                                }}
                            ><Button onClick={this.AddStore} type="primary" style={{ marginRight: 8 }}>
                            确定
                                </Button>
                            </div>}
                    >

                        店铺名称： <Input onChange={(input) => this.setState({ sName: input.currentTarget.value })}></Input>
                                店铺地址：<Input placeholder='例如：河南省 郑州市 二七区' onChange={(input) => this.setState({ sLocation: input.currentTarget.value })}></Input>
                        
                    </Drawer>
                    <Drawer
                        title="加入商店"
                        width={300}
                        onClose={this.onClose}
                        visible={this.state.joinVisible}
                        bodyStyle={{ paddingBottom: 80 }}
                        footer={
                            <div
                                style={{
                                    textAlign: 'right',
                                }}
                            >
                                <Button onClick={this.actionJoinStore} type="primary" style={{ marginRight: 8 }}>
                                    确定
                                </Button>
                            </div>}
                    >
                        <label htmlFor="joinStoreIDInput">店铺编号</label>
                        <Input ref={input => this.joinStoreIDInput = input} id="joinStoreIDInput" ></Input>
                    </Drawer>
                </div>
            </div>
        );
    }
}

export default JoinStore;


